<template>
  <div class="student-search">
    <h1>学生缺勤预测查询</h1>
    
    <div class="card search-card">
      <div class="search-form">
        <input 
          v-model="searchStudentId" 
          type="text" 
          placeholder="输入学号查询" 
          @keyup.enter="searchStudent"
        />
        <button @click="searchStudent" :disabled="loading">查询</button>
      </div>
      
      <div v-if="loading" class="loading">
        正在查询...
      </div>
      
      <div v-if="error" class="error-message">
        {{ error }}
      </div>
    </div>
    
    <div v-if="prediction" class="card prediction-card">
      <h2>{{ prediction.userName }} ({{ prediction.studentId }}) 的缺勤预测</h2>
      
      <div class="prediction-list">
        <div v-for="(course, index) in prediction.predictions" :key="index" class="prediction-item">
          <div class="course-name">{{ course.courseName }}</div>
          <div class="prediction-bar-container">
            <div 
              class="prediction-bar" 
              :style="{width: `${course.probability * 100}%`}"
            ></div>
            <span class="prediction-value">{{ (course.probability * 100).toFixed(1) }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'StudentSearch',
  data() {
    return {
      searchStudentId: '',
      prediction: null,
      loading: false,
      error: null
    }
  },
  methods: {
    ...mapActions(['fetchStudentPredictions']),
    searchStudent() {
      if (!this.searchStudentId) {
        this.error = '请输入学号'
        return
      }
      
      this.loading = true
      this.error = null
      
      this.fetchStudentPredictions(this.searchStudentId)
        .then(data => {
          this.prediction = data
        })
        .catch(err => {
          this.error = err.response?.data || '查询失败，学生不存在或无预测数据'
          this.prediction = null
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.search-card {
  margin-bottom: 30px;
}

.search-form {
  display: flex;
  gap: 10px;
}

.search-form input {
  flex-grow: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.search-form button {
  padding: 0 20px;
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.search-form button:hover {
  background: #0095ff;
}

.search-form button:disabled {
  background: #8cc9fd;
  cursor: not-allowed;
}

.loading, .error-message {
  margin-top: 15px;
  padding: 10px;
  text-align: center;
}

.error-message {
  color: #e53935;
  background-color: #ffebee;
  border-radius: 4px;
}

.prediction-list {
  margin-top: 20px;
}

.prediction-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.course-name {
  width: 100px;
  font-weight: 600;
}

.prediction-bar-container {
  flex-grow: 1;
  height: 24px;
  background: #eee;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.prediction-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff6b81, #ff4757);
  border-radius: 12px;
}

.prediction-value {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  font-weight: 600;
}
</style>


